<template>
  <h3 class="title" style="font-size:20px;">{{title}}</h3>
  <div class="widget" style="font-size:20px">
    <ul class="list-group">
      <side-bar-item-li :aclass="aclass" @liClick="liClick"></side-bar-item-li>
    </ul>
  </div>
</template>

<script>
import SideBarItemLi from "@/components/baritem/SideBarItemLi";
export default {
  name: "SideBarItem",
  props:{
    title:{
      type:String,
      default(){
        return "";
      }
    },
    aclass:{
      type:Object,
      default(){
        return {}
      }
    },
  },
  components: {SideBarItemLi},
  emits: {
    liClick: null,//事件没有检验
  },
  methods:{
    liClick(val,index){
      this.$emit('liClick',val,index);
      // console.log('sidebaritem---ok');
      // console.log(val,index);
    }
  }
}
</script>

<style scoped>

.list-group {
  padding: 5px;
}

.title {
  text-align: center;
}

</style>